<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script type="text/javascript" charset="utf-8">
        var context = null;
        var textArray = ['开始', '停止'];
        var bitmapWidth = 600;
        var bitmapHeight = 200;
        var ballRadius = 20;
        var ballPointX = ballRadius;
        var ballPointY = bitmapHeight - ballRadius;
        var directionX = 0;
        var directionY = 0;
        var speedX = -1;
        var speedY = -5;
        window.onload = function() {

            var createBall = function() {
                context.beginPath();
                context.fillStyle = "blue";
                context.arc(ballPointX, ballPointY, ballRadius, 0, 2 * Math.PI, true);
                context.closePath();
                context.fill();
            }

            var createBallX = function() {
                if (directionX === 0) {
                    if ((ballPointX - ballRadius) < 0) {
                        directionX = 1;
                    }
                    ballPointX += speedX;
                } else {
                    if ((ballPointX + ballRadius) > bitmapWidth) {
                        directionX = 0;
                    }
                    ballPointX -= speedX;
                }
            }

            var createBallY = function() {
                if (directionY === 0) {
                    if ((ballPointY - ballRadius) < 0) {
                        directionY = 1;
                    }
                    ballPointY += speedY;
                } else {
                    if ((ballPointY + ballRadius) > bitmapHeight) {
                        directionY = 0;
                    }
                    ballPointY -= speedY;
                }
            }

            var cleanBitmap = function() {
                context.clearRect(0, 0, bitmapWidth, bitmapHeight);
            }

            var initialize = function() {
                var canvasElem = document.createElement('canvas');
                canvasElem.width = bitmapWidth;
                canvasElem.height = bitmapHeight;
                canvasElem.style = 'border:1px blue solid;';
                document.body.appendChild(canvasElem);
                if (canvasElem.getContext) {
                    context = canvasElem.getContext('2d');
                    createBall();
                } else {
                    throw '浏览器不支持canvas绘图!';
                }
                document.body.appendChild(document.createElement('br'));
                var controlButton = document.createElement('input');
                controlButton.type = 'button';
                controlButton.id = 'control-button';
                controlButton.value = textArray[0];
                document.body.appendChild(controlButton);

                var speedButton = document.createElement('input');
                speedButton.type = 'button';
                speedButton.id = 'speed-button';
                speedButton.value = '速度+10';
                document.body.appendChild(speedButton);
            }();
            var timeNumberDefault = 100;
            var timeNumber = timeNumberDefault;
            var controlTimer = null;
            document.getElementById('control-button').onclick = function(e) {
                console.log(e.target.value)
                if (controlTimer === null) {
                    e.target.value = textArray[1];
                    controlTimer = setInterval(function() {
                        cleanBitmap();
                        createBallX();
                        createBallY();
                        createBall();
                    }, timeNumber);
                } else {
                    e.target.value = textArray[0];
                    clearInterval(controlTimer);
                    controlTimer = null;
                    createBall();
                }
            }

            document.getElementById('speed-button').onclick = function(e) {
                if (timeNumber <= 0) {
                    timeNumber = timeNumberDefault;
                }
                if (timeNumber <= 10) {
                    timeNumber -= 1;
                } else {
                    timeNumber -= 10;
                }
                console.log('timeNumber=' + timeNumber)
                e.target.value = '速度=' + timeNumber;
                document.getElementById('control-button').value = textArray[1];
                if (controlTimer !== null) {
                    clearInterval(controlTimer);
                    controlTimer = null;
                }
                controlTimer = setInterval(function() {
                    cleanBitmap();
                    createBallX();
                    createBallY();
                    createBall();
                }, timeNumber);
            };
        }
    </script>
</head>

<body></body>

</html>